• v-bind(屬性綁定)

之前所介紹的，若想在html動態的呈現資料可以使用{{ }}，但如果今天想動態的更換html中的屬性呢?是不是也能在屬性中使用{{ }}，像是:<img src=”{{imgsrc}}”>，是否也能正常跑出照片呢?答案是不行的!因為這種語法無法被套用在屬性中。所以今天提供了v-bind屬性，能夠動態輸出HTML元素上的屬性，例如:id、class、style、href、imgSrc、自定義屬性等

v-bind 指令的使用方法: v-bind:屬性名稱

接下來實例操作一下用v-bind來綁定呈現圖片、連結和style樣式吧!

Example

<div id="app">
    <h1 v-bind:style="{color:activecolor}">welcome</h1>
    <a v-bind:href="url">Click me to google</a>
    <img v-bind:src="imgsrc">
</div>  
<script>
var app = new Vue({
    el:'#app',
    data:{
        url:"https://www.google.com.tw/?hl=zh_TW",
        imgsrc:"http://photos1.blogger.com/blogger/6857/1451/320/James.Pond.1.jpg",
        activecolor:"green"
    }
});
</script>

圖片來源:http://photos1.blogger.com/blogger/6857/1451/320/James.Pond.1.jpg
這樣就能綁定成功，而要更改html的class等屬性來操控style也可以使用V-bind!以後要更改html中的屬性時，可以更加精確的從vue實體中更改就行。這個指令也提供了縮寫的方式，像是<a :href="url">，更加簡潔。

結語

下一篇將會介紹vue指令:v-on!